<template>
  <div style="background-color: #f5f5f5;">
    <!--demo1-->
    <vm-list title="list">
      <vm-list-item style="line-height: 44px" class="vmui-pointer">
        <template slot="left">
          <span>我是一个粉刷匠</span>
        </template>
        <template slot="right"><i class="iconfont icon-front"></i></template>
      </vm-list-item>
      <vm-list-item style="line-height: 44px" class="vmui-pointer">
        <template slot="left">
          <span>我是一个粉刷匠</span>
        </template>
        <template slot="right"><i class="iconfont icon-front"></i></template>
      </vm-list-item>
    </vm-list>
    <!--demo2-->
    <vm-list title="list">
      <vm-list-item style="line-height: 44px" class="vmui-pointer">
        <template slot="left">
          <span>音乐</span>
        </template>
        <span>music</span>
        <template slot="right"><i class="iconfont icon-front"></i></template>
      </vm-list-item>
      <vm-list-item style="line-height: 44px" class="vmui-pointer">
        <template slot="left">职业</template>
        <span>我是一个粉刷匠</span>
        <template slot="right"><i class="iconfont icon-front"></i></template>
      </vm-list-item>
    </vm-list>
    <!--demo2-->
    <vm-list title="form表单">
      <vm-list-item style="line-height: 44px">
        <template slot="left">用户名:</template>
        <vm-input placeholder="请输入用户名"></vm-input>
      </vm-list-item>
      <vm-list-item style="line-height: 44px">
        <template slot="left">密码:</template>
        <vm-input type="password" placeholder="password"></vm-input>
      </vm-list-item>
      <vm-list-item style="line-height: 44px">
        <vm-input placeholder="请输入手机号"></vm-input>
      </vm-list-item>
      <vm-list-item style="line-height: 44px">
        <vm-input placeholder="请输入验证码"></vm-input>
        <template slot="right">
          <vm-button type="warning" size="mini">获取验证码</vm-button>
        </template>
      </vm-list-item>
      <vm-list-item>
        <vm-textarea v-model="textarea" placeholder="介绍下自己" maxlength="100" show-counter style="height: 90px;"></vm-textarea>
      </vm-list-item>
      <vm-list-item style="line-height: 44px">
        <template slot="left">设为默认地址</template>
        <template slot="right">
          <vm-switch v-model="switchMe"></vm-switch>
        </template>
      </vm-list-item>
      <div style="margin: 15px;">
        <vm-button type="primary" size="large" style="display: block">提交</vm-button>
      </div>
    </vm-list>
  </div>
</template>

<script>
  import '@/vmui/list'
  import '@/vmui/input'
  import '@/vmui/textarea'
  import '@/vmui/button'
  import '@/vmui/switch'
  export default {
    data () {
      return {
        textarea: '',
        switchMe: false
      }
    }
  }
</script>
